<template>
	<view class="page">
		<view class="body">
			<!-- 绑定银行卡 -->
			<view class="payouts_body" v-if="type == 3">
				<uni-section title="账户类型" type="line">
					<uni-data-select v-model="bank_type" :localdata="accountList" @change="change"
						style="background-color: #f4f6fa;"></uni-data-select>
				</uni-section>
				<uni-section title="姓名" type="line">
					<input class="uni-input" placeholder="请输入姓名" v-model="true_name" />
				</uni-section>
				<uni-section title="所属银行" type="line">
					<uni-data-select v-model="bankValue" :localdata="bankList" @change="changes"
						style="background-color: #f4f6fa;"></uni-data-select>
				</uni-section>
				<uni-section title="银行账号" type="line">
					<input class="uni-input" placeholder="请输入账号" v-model="bank_no" maxlength="16" />
				</uni-section>
			</view>
			<!-- 绑定支付宝 -->
			<view class="payouts_body" v-if="type == 2">
				<uni-section title="姓名" type="line">
					<input class="uni-input" placeholder="请输入姓名" v-model="true_name" />
				</uni-section>
				<uni-section title="支付宝账号" type="line">
					<input class="uni-input" placeholder="请输入账号" v-model="bank_no" />
				</uni-section>
			</view>
			<!-- 绑定微信 -->
			<view class="payouts_body" v-if="type == 1">
				<uni-section title="姓名" type="line">
					<input class="uni-input" placeholder="请输入姓名" v-model="true_name" />
				</uni-section>
				<uni-section title="微信账号" type="line">
					<input class="uni-input" placeholder="请输入账号" v-model="bank_no" />
				</uni-section>
			</view>
		</view>
		<view class="btn btn_css" @click="btn">
			提交
		</view>
	</view>
</template>

<script>
	import {
		getOne,
		getBankName,
		getUpdate,
		getAdd
	} from '../../api/bank/index.js'
	export default {
		data() {
			return {
				type: '',
				isEnroll: '',
				bank_id: '',
				accountList: [{
					value: 2,
					type: '3',
					text: "银行卡"
				}, ],
				bank_type: 2,
				bankList: [],
				bankValue: '',
				true_name: '',
				bank_no: '',
				bank_name: ''
			}
		},
		onLoad(e) {
			this.bank_id = e.bank_id;
			this.isEnroll = e.isEnroll;
			if (e.isEnroll == "2") {
				uni.setNavigationBarTitle({
					title: '绑定账户'
				})
			}
			if (e.isEnroll == "1") {
				uni.setNavigationBarTitle({
					title: '修改账户'
				})
				this.getBankList()
				this.init();
			}
			this.getBankList()
			this.type = e.type
		},
		methods: {
			// 获取银行列表
			getBankList() {
				getBankName().then(res => {
					this.bankList = res.data;
					console.log(111, this.bankList);
				})
			},
			// 获取账户信息
			init() {
				var data = {
					bank_id: this.bank_id
				}
				getOne(data).then(res => {
					this.true_name = res.data.true_name;
					this.bank_no = res.data.bank_no;
					for (var i = 0; i < this.bankList.length; i++) {
						if (this.bankList[i].text == res.data.bank_name) {
							this.bankValue = this.bankList[i].value;
							this.bank_type = this.bankList[i].value;
						}
					}
				})
			},
			change(e) {
				console.log("e:", e);
			},
			// 选择所属银行
			changes(e) {
				console.log("es:", e);
				for (var i = 0; i < this.bankList.length; i++) {
					if (this.bankList[i].value == e) {
						console.log("找到了", i);
						this.bank_name = this.bankList[i].text
					}
				}
			},
			btn() {
				var data = {
					bank_id: this.bank_id,
					true_name: this.true_name,
					bank_no: this.bank_no,
					bank_name: this.bank_name,
					bank_isdefault: '',
					open_name: '',
					open_daddress: '',
					bank_type: this.type,
				}
				if (this.isEnroll == 1) {
					getUpdate(data).then(res => {
						uni.showToast({
							"title": res.msg,
							"icon": "none"
						})
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 1500);
					})
				} else if (this.isEnroll == 2) {
					getAdd(data).then(res => {
						uni.showToast({
							"title": res.msg,
							"icon": "none"
						})
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 1500);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;

		.body {
			.payouts_body {
				.uni-input {
					border: 1px solid #e5e5e5;
					padding: 10rpx;
					border-radius: 15px;
					font-size: 13px;
					background-color: #f4f6fa;
				}
			}

		}

		.btn_css {
			margin-top: 50px;
		}
	}
</style>